/* ==========================================================================
   3. HEADER & NAVIGATION (Dense Desktop Layout with Buttons)
   ========================================================================== */
   header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--border-color);
    
    /* Generous vertical padding to give the header weight on large screens */
    padding: 24px 80px; 
    
    /* Grid system stretching across the entire width */
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: center;
    width: 100%;
}

/* 1. Left Column: Enlarged Avatar */
.avatar-wrapper {
    display: flex;
    justify-content: flex-start;
}

.header-avatar {
    /* Significantly larger presence on desktop, scales dynamically */
    width: clamp(55px, 6vw, 85px);
    height: clamp(55px, 6vw, 85px);
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-color);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2); /* Soft glow around avatar */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.header-avatar:hover {
    transform: scale(1.05) rotate(5deg);
}

/* 2. Middle Column: Centered Name & Subtitle Group */
.logo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px; /* Small gap between name and subtitle */
}

.logo-name {
  font-size: clamp(1.4rem, 2.2vw, 2.2rem); /* Adjusted slightly for perfect balance with subtitle */
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap; 
  letter-spacing: -0.5px;
  background: linear-gradient(to right, var(--text-primary), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-subtitle {
  font-size: clamp(0.75rem, 1vw, 0.95rem); /* Dynamic scaling */
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase; /* Clean, modern developer aesthetic */
  letter-spacing: 2px; /* Elegant letter spacing */
  white-space: nowrap;
}

/* 3. Right Column: Navigation Buttons */
header nav {
    display: flex;
    justify-content: flex-end;
}

header nav ul {
    display: flex;
    list-style: none;
    gap: 14px; /* Tight, intentional spacing between buttons */
}

/* Styled as interactive interface buttons */
header nav a {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    white-space: nowrap; 
    
    /* Button layout */
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 8px;
    
    transition: all var(--transition-fast);
}

/* Active interactive states for the buttons */
header nav a:hover {
    color: var(--bg-color);
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}